<template>
	<view>
		<template v-for="item in list">
			<view class="swiper-item " v-if="item.type === 'img'">
				<image :src="item.img" mode="widthFix"></image>
			</view>
			<view class="swiper-item" v-else>
				<video id="myVideo" :poster="item.img" :src="item.url" style="width: 100%;"></video>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				interval: 2000,
				duration: 500,
				autoHeight: ''
			};
		},
		onLoad() {
			const list = uni.getStorageSync('list')
			if(list) {
				this.list = JSON.parse(list)
			}
			console.log(this.list)
			const systemConf = uni.getSystemInfoSync()
			console.log(systemConf)
			this.autoHeight = systemConf.windowHeight
		},
		methods: {
			fullScreen: function(e) {
				e.detail.direction = "horizontal"
			},
			changeIndicatorDots(e) {
			            this.indicatorDots = !this.indicatorDots
			        },
			        changeAutoplay(e) {
			            this.autoplay = !this.autoplay
			        },
			        intervalChange(e) {
			            this.interval = e.target.value
			        },
			        durationChange(e) {
			            this.duration = e.target.value
			        }
		},
		onHide() {
			uni.removeStorageSync('list')
		}
	}
</script>

<style lang="scss">
.swiper-item {
	image {
		width: 100%;
	}
	#myVideo {
		width: 100%;
	}
}
</style>
